<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="container">
        <div class="innerCnt">
            <div class="pinkBox">
                <div class="signUp noDisplay">
                    <h1>Register</h1>
                    <form >
                        <input type="text" placeholder="UserName">
                        <input type="email" placeholder="Email">
                        <input type="password" placeholder="Password">
                        <input type="password" placeholder="Confirm Password">
                        <button class="button">Create Account</button>
                    </form>
                </div>
                <div class="signIn">
                    <h1>Sign In</h1>
                    <form class="login">
                        <input type="text" placeholder="UserName">
                        <input type="password" placeholder="PassWord">
                        <div class="checkbox">
                            <input type="checkbox" id="remember" /><label for="remember">Remember Me</label>
                        </div>
                        <button class="sumbit">Login</button>
                    </form>
                </div>
            </div>
            <div class="leftBox">
                <h2 class="title"><span>BLOOM</span>&<br>BOUQUET</h2>
                <p class="desc">Pick your perfect <span>bouquet</span></p>
                <img class="flower smaller" src="./src/flower1.webp" />
                <p class="account">Have an account?</p>
                <button class="button" id="in">Login</button>
            </div>
            <div class="rightBox">
                <h2 class="title"> <span>BLOOM</span>%<br>BOUQUET</h2>
                <p class="desc">Pick your perfect <span>bouquet</span></p>
                <img class="flower" src="./src/flower2.webp" />
                <p class="account">Don't have an account?</p>
                <button class="button" id="up">Sign Up</button>
            </div>
        </div>
    </div>
</body>
<script>
    let sup = document.getElementById('up');
    let sin = document.getElementById('in');
    let pinkBox = document.getElementsByClassName('pinkBox')[0];
    let signIn = document.getElementsByClassName('signIn')[0];
    let signUp = document.getElementsByClassName('signUp')[0];
    console.log(pinkBox);
    sup.addEventListener('click',()=>{
        pinkBox.style.transform = 'translateX(80%)';
        signIn.className = 'noDisplay';
        signUp.className = 'signUp';
    })
    sin.addEventListener('click',()=>{
        pinkBox.style.transform = 'translateX(0%)';
        signIn.className = 'signIn';
        signUp.className = 'noDisplay';
    })
</script>
</html>
